<%@ page language="java" pageEncoding="UTF-8"%>
<style type="text/css">
/*输入样式*/
#compareSideBar {
	position: fixed;
	right: 0px;
	height: ;
	z-index: 999;
	width: auto;
	height: auto;
	height: 210px;
}

#compareContainer {
	overflow: hidden;
	display: none;
	border: 1px #FF6101 solid;
	background: #ffffff;
	height: 100%;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	text-align: center;
}	

.compareBlock {
	margin: 0 auto;
}

#noGoodsTip {
	margin-top: 95px;
	white-space: nowrap;
	overflow: hidden;
	color: red;
	font-weight: bold;
	font-size: 20px
}

#goodsCompareItems ul li {
	padding: 4px 10px;
	text-align: left;
	height: 30px;
	border-bottom: 1px red dotted;
	position: relative;
}

.compareGoodsLink {
	position: absolute;
	left: 10px;
	top: 20px;
	font-size: 13px;
	width: 226px;
	overflow: hidden;
	white-space: nowrap;
}

#compareTip {
	cursor: pointer;
}

.compareGoodCancel {
	position: absolute;
	right: 10px;
	top: 14px;
	font-size: 20px;
}

.compareGoodCancel:hover{
	text-decoration: none;
}

#doCompareBtn {
	background: #FFBA54;
	padding: 2px 4px;
	border: 1px green solid;
	position: absolute;
	left: 10px;
	top: 10px;
	color: #ffffff;
}

#doCompareBtn:hover {
	background: #FF9A30;
}

#removeCompareItemBtn {
	background: #FFBA54;
	padding: 2px 4px;
	border: 1px green solid;
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ffffff;
}

#removeCompareItemBtn:hover {
	background: #FF9A30;
}
</style>
<script type="text/javascript">
	var goodsCompareShowFlag = false;
	$(function(){
		$("#compareSideBar").css("top",100);
		refreshCompareItems();
		// 对比列表展现与隐藏
		$("#compareTip").click(function(){
			refreshCompareItems();
			if(!goodsCompareShowFlag){
				$("#compareContainer").width(1);
				$("#compareContainer").show();
				$("#compareContainer").animate({
				    width: 340,
				    height: $("#compareSideBar").height(), 
				}, 500,function(){
					goodsCompareShowFlag = true;
				});
			}//else{
				//$("#compareContainer").animate({
				   // width: "0",
				    //height: $("#compareSideBar").height(),
				//}, 500,function(){
					//$("#compareContainer").hide();
					//goodsCompareShowFlag = false;
				//});
			//}
		})
		
		$("#compareSideBar").hover(
			function(){
				
			},
			function(){
				if(goodsCompareShowFlag){
					$("#compareContainer").animate({
					   	width: "0",
					    height: $("#compareSideBar").height(),
					}, 500,function(){
						$("#compareContainer").hide();
						goodsCompareShowFlag = false;
					});
				}
			}
		);
	})
	
	/**
	 * 删除一条比对列表的记录
	 */
	function removeCompareItem(obj){
		 var goodsId = $(obj).attr("itemId");
		 var goodsCompareItems = getCookieByKeyName("goodsCompareItems");
		 var compareGoodsJson = $.parseJSON(goodsCompareItems);
		 for(var i = 0 ; i < compareGoodsJson.length ; i++){
			 var goodsIdCookie = compareGoodsJson[i].goodsId;
			 if(goodsId == goodsIdCookie){
				 compareGoodsJson.splice(i,1);
			 }
		 }
		 setCookie("goodsCompareItems",JSON.stringify(compareGoodsJson),7);
		 if(compareGoodsJson.length <= 0){
			 clearAllCompareItems();
		 }
		 refreshCompareItems();
	 }
	 
	/**
	 * 清空比对列表
	 */
	function clearAllCompareItems(){
		setCookie("goodsCompareItems","",-1);//立即失效
		$("#goodsCompareItems ul").remove();
		$("#goodsCompareItems").html("<div id='noGoodsTip'>比对列表中尚未添加商品!</div>");
	}
	 
	/**
	 * 将商品添加到比对列表
	 */
	function addGoodsToCompare(){
		refreshCompareItems();
		var goodsCompareItems = getCookieByKeyName("goodsCompareItems");
		var compareGoodsJson;
		if(goodsCompareItems){
			compareGoodsJson = $.parseJSON(goodsCompareItems);
			var existsFlag = false;
			for(var i = 0 ; i < compareGoodsJson.length ; i++){
				if(compareGoodsJson[i].goodsId == "${goodsInfo.id}"){
					existsFlag = true;
					break;
				}
			}
			if(!existsFlag){
				if(compareGoodsJson.length == 4){
					alert("比对列表中商品数已达最大值，不可再添加!");
					return;
				}
				$("#goodsCompareItems ul").find("#doCompareBtn").parent().before("<li><a class='compareGoodsLink' target='_blank' href='${ctx}/web/goodsInfo?goodsId=${goodsInfo.id}'>${goodsInfo.goodsName}</a><a class='compareGoodCancel' itemId='${goodsInfo.id}' href='javascript:void(0)' onclick='removeCompareItem(this)'>remove</a></li>");
				compareGoodsJson.push({"goodsName" : "${goodsInfo.goodsName}","goodsId" : "${goodsInfo.id}"});
				setCookie("goodsCompareItems",JSON.stringify(compareGoodsJson),7);
			}else{
				alert("比对列表中已存在该商品！");
				return;
			}
		}else{
			compareGoodsJson = "[{\"goodsName\" : \"${goodsInfo.goodsName}\",\"goodsId\" : \"${goodsInfo.id}\"}]";
			setCookie("goodsCompareItems",compareGoodsJson,7);
			$("#goodsCompareItems").html("<ul></ul>");
			$("#goodsCompareItems ul").append("<li><a class='compareGoodsLink' target='_blank' href='${ctx}/web/goodsInfo?goodsId=${goodsInfo.id}'>${goodsInfo.goodsName}</a><a class='compareGoodCancel' itemId='${goodsInfo.id}' href='javascript:void(0)' onclick='removeCompareItem(this)'>×</a></li>");
			$("#goodsCompareItems ul").append('<li style="border: none"><a id="doCompareBtn" href="javascript:void(0)">开始比对</a> <a id="removeCompareItemBtn" onclick="clearAllCompareItems()" href="javascript:void(0)">清空列表</a></li>');
		}
	}
	
	/**
	 * 刷新比对列表
	 */
	function refreshCompareItems(){
		// 从cookie中获取商品比对列表
		var goodsCompareItems = getCookieByKeyName("goodsCompareItems");
		// 如果存在cookie值
		if(goodsCompareItems){
			// 转换成json对象
			var compareGoodsJson = $.parseJSON(goodsCompareItems);
			if(compareGoodsJson.length <= 0){
				$("#goodsCompareItems").html("<div id='noGoodsTip'>比对列表中尚未添加商品!</div>");
				return;
			}else{
				$("#goodsCompareItems").html("");
				$("#goodsCompareItems").html("<ul></ul>");
			}
			var goodsIds = "";
			for(var i = 0 ; i < compareGoodsJson.length ; i++){
				var goodsName = compareGoodsJson[i].goodsName;
				var goodsId = compareGoodsJson[i].goodsId;
				goodsIds += goodsId + ",";
				$("#goodsCompareItems ul").append("<li><a class='compareGoodsLink' title='" + goodsName + "' target='_blank' href='${ctx}/web/goodsInfo?goodsId=" + goodsId + "'>" + goodsName + "</a><a class='compareGoodCancel' itemId='" + goodsId + "' href='javascript:void(0)' onclick='removeCompareItem(this)'>×</a></li>");
			}
			goodsIds = goodsIds.substring(0,goodsIds.length - 1);
			$("#goodsCompareItems ul").append('<li style="border: none"><a id="doCompareBtn" href="${ctx}/web/goodsCompare?goodsIds=' + goodsIds + '" target="_blank">开始比对</a> <a id="removeCompareItemBtn" onclick="clearAllCompareItems()" href="javascript:void(0)">清空列表</a></li>');
		}else{// cookie值不存在
			$("#goodsCompareItems").html("<div id='noGoodsTip'>比对列表中尚未添加商品!</div>");
		}
	}

	/**
	 * 设置cookie的值
	 * @param {Object} c_name
	 * @param {Object} value
	 * @param {Object} expiredays
	 */
	function setCookie(c_name,value,expiredays){
		var exdate = new Date()
		exdate.setDate(exdate.getDate() + expiredays)
		document.cookie=c_name+ "=" +escape(value) + ";path=/" + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
	}
	
	/**
	 * 获取cookie中的值,商品比对的cookie如：goodsCompareItems=[{goodsId:id,goodsName:name}];
	 * @param {Object} sName
	 * @return {TypeName} 
	 */
	function getCookieByKeyName(keyName) {
	    var aCookie = document.cookie.split("; ");
	    var lastMatch = null;
	    for (var i = 0; i < aCookie.length; i++) {
	        var aCrumb = aCookie[i].split("=");
	        if (keyName == aCrumb[0]) {
	            lastMatch = aCrumb;
	        }
	    }
	    if (lastMatch) {
	        var v = lastMatch[1];
	        if (v === undefined) return v;
	        return unescape(v);
	    }
	    return null;
	}
</script>
<div id="compareSideBar" style="">
	<table border="0" style="height: 100%">
		<tr>
			<td>
				<div id="compareTip"
					style="text-align: center; width: 24px; height: 88px; background: #FFBA54; color: #ffffff">
					<div style="word-break: break-all; word-wrap: break-word; padding-top: 2px; line-height: 21px; font-size: 13px">
						商
						<br />
						品
						<br />
						比
						<br />
						对
					</div>
				</div>
			</td>
			<td>
				<div id="compareContainer">
					<div class="compareBlock" id="goodsCompareItems">

					</div>
				</div>
			</td>
		</tr>
	</table>
</div>